<template>
	<view class="moneyTools">
		<view class="logoBox">
			<view class="logo" :class="theme+'-bg-abox'">
				<image src="../../../../static/logo.png"></image>
			</view>
		</view>
		<view class="from">
			<view class="tips" :class="theme + '-ftitle-color'">
				<view class="text">
					<text>{{$t('MoneyTool.Entertheamount')}}</text>
				</view>
				<view class="input" :class="theme+'-border-inputb'">
					<uni-easyinput v-model="num" type="number" focus maxlength="15" :inputBorder="false">
					</uni-easyinput>
				</view>
			</view>
			<view class="title" :class="theme + '-ftext-color'">
				<text>{{text}}</text>
			</view>
			<view class="btn">
				<view class="registerBtn b br-1" @click="copy" :class="theme+'-border-input'">
					<view class="icon">
						<image src="../../../../static/images/icons/ic_line_copy24px.png" mode=""></image>
					</view>
					<text  :class="theme + '-ftitle-color'">{{$t('MoneyTool.Copy')}}</text>
				</view>
				<view class="loginBtn b br-1" @click="turn" :class="theme+'-bg-abox'">
					<text>{{$t('MoneyTool.Conversion')}}</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		convertCurrency
	} from './index.js'
	export default {
		name: 'moneyTools',
		data() {
			return {
				num: '',
				text: ''
			}
		},
		methods: {
			copy() {
				uni.setClipboardData({
					data: this.text,
					success: (res) => {
						console.log('res');
					}
				});
			},
			turn() {
				this.text = convertCurrency(this.num)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.moneyTools {
		height: 100%;

		.logoBox {
			display: flex;
			padding: 80rpx 0;
			justify-content: center;

			.logo {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				overflow: hidden;
			}
		}

		.from {
			padding: 0 80rpx;

			.tips {
				margin-bottom: 40rpx;

				.text {
					font-size: 24rpx;
				}
			}

			.title {
				height: 150rpx;
			}

			.btn {
				margin-top: 80rpx;
				display: flex;
				justify-content: space-between;


				.b {
					width: 270rpx;
					height: 88rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 30rpx;
					font-weight: 700;
				}

				.registerBtn {
					box-sizing: border-box;

					.icon {
						margin-right: 10rpx;
					}
				}

				.loginBtn {
					color: #FFFFFF;
				}
			}

			.forget {
				display: flex;
				justify-content: space-between;
				margin-top: 55rpx;

				.an {
					font-size: 26rpx;
					color: #0081FF;
				}
			}
		}
	}
</style>
